<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本表格</title>
</head>
<body>
<!--
    一个table标签表示一个表格
    表格中存在无数的行与列
    每一个tr标签表示表格的一行
    每一个td/th标签表示表格的一列
    td与th的区别
        th内容默认是居中,且字体加粗,一般用于表头
        td内容默认居左,不加粗,一般用于表正文
        td与th的字体一致
    border属性:设置表格的边框厚度,其值是一个数字
        0表示没有边框
        数字越大,边框越厚
        边框只涉及表格四周的边框
        但是只要存在边框,单元格之间的边框也会自动出来
    width/height:设置表格宽度与高度
        支持表格、行、列
    align:设置表格的水平对齐方式
        取值:left(默认值)、center、right
        支持表格、行、列
    valign:设置单元格垂直对齐方式
        取值:top、middle(默认值)、bottom
        只支持行、列,表格无法设置
    bgcolor:设置表格的背景色
        支持表格、行、列
    bordercolor:设置表格的边框颜色
    background:设置表格的背景图片
    cellpadding:设置单元格内容与单元边框的距离
    cellspacing:设置单元格与单元格之间的距离
    优先级问题
        在表格中,表格、行、列可能会存在相同的属性设置
        此时优先级:列>行>表格
        范围越小,优先级越高
-->
<table border="1" width="500px" height="300px" align="center" valign="bottom" bgcolor="#dddddd" bordercolor="blue" cellpadding="10px" cellspacing="0px" background="../images/4.jpg">
    <tr bgcolor="red" background="../images/3.gif">
        <th width="100px" height="60px">单元格</th>
        <th>单元格</th>
        <th>单元格</th>
        <th>单元格</th>
        <th>单元格</th>
    </tr>
    <tr align="center" valign="top">
        <td bgcolor="green">单元格</td>
        <td bgcolor="#663399">单元格</td>
        <td valign="middle">单元格</td>
        <td background="../images/heihei.gif">单元格</td>
        <td>单元格</td>
    </tr>
    <tr>
        <td align="right" valign="bottom">单元格</td>
        <td>单元格</td>
        <td></td>
        <td></td>
        <td>单元格</td>
    </tr>
    <tr>
        <td>单元格</td>
        <td>单元格</td>
        <td>单元格</td>
        <td>单元格</td>
        <td></td>
    </tr>
</table>
</body>
</html>